<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="box">
        <select v-model="province">
            <option value="">请选择</option>
            <option v-for="item in provinces" v-bind:value="item">{{item}}</option>
        </select>
        <select v-model="city">
            <option value="">请选择</option>
            <option v-for="item in citys" v-bind:value="item">{{item}}</option>
        </select>
        <select v-model="district">
            <option value="">请选择</districts>
            <option v-for="item in districts" v-bind:value="item">{{item}}</option>
        </select>
    </div>
</body>

<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            province: '',
            city: '',
            district: '',
            addressData: {
                '黑龙江省': {
                    '哈尔滨市': {
                        '道里区': {},
                        '南岗区': {}
                    },
                    '齐齐哈尔市': {
                        '龙沙区': {},
                        '建华区': {}
                    }
                },
                '吉林省': {
                    '长春市': {
                        '朝阳区': {},
                        '南关区': {}
                    },
                    '吉林市': {
                        '船营区': {},
                        '龙潭区': {}
                    }
                },
                '辽宁省': {
                    '沈阳市': {
                        '和平区': {},
                        '沈河区': {}
                    },
                    '大连市': {
                        '中山区': {},
                        '金州区': {}
                    }
                }
            }
        },
        watch: {
            province: function (newValue, oldValue) {
                if (newValue != oldValue) {
                    this.city = ''
                }
            },
            city: function (newValue, oldValue) {
                if (newValue != oldValue) {
                    this.district = ''
                }
            }
        },
        computed: {
            provinces: function () {
                if (!this.addressData) {
                    return;
                }
                var pArr = [];
                for (var key in this.addressData) {
                    pArr.push(key);
                }
                return pArr;
            },
            citys: function () {
                if (!this.addressData || !this.province) {
                    return;
                }
                var cArr = [];
                for (var key in this.addressData[this.province]) {
                    cArr.push(key);
                }
                return cArr;
            },
            districts: function () {
                if (!this.addressData || !this.city) {
                    return;
                }
                var dArr = [];
                for (var key in this.addressData[this.province][this.city]) {
                    dArr.push(key);
                }
                return dArr;
            },
        }
    })
</script>

</html>